<template>
  <div class="header-banner">

    <div class="top-header">
      <div class="header-container">
        <div class="gov-title">
          <div class="gov-logo">
            <img src="@/assets/img/logo.png" alt="logo">
          </div>
          <div class="gov-text">
            <h1>{{ title }}</h1>
          </div>
        </div>
        <div class="header-controls">
          <button class="home-btn" @click="useHelpHandler">
            <i class="fas fa-question-circle help-icon"></i>使用帮助
          </button>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="showDialog" append-to-body :custom-class="'el-dialog_help'" width="60%" top="10vh">
      <div slot="title" class="dialog-title">
        <div class="help-title-icon">
          <img src="@/assets/img/logo.png"></img>
        </div>
        <div class="help-title">帮助中心</div>
      </div>
      <div class="help-cont">
        <div class="top"><i class="el-icon-caret-top"></i></div>
        <div class="content">
          <h1>"AI助手"智能客服使用指南</h1>

          <div class="">
            <div class="title">
              <h2 class="title">一、智能体简介</h2>
              <div class="help-content">
                "AI助手"智能客服是一个基于大语言模型开发的生成式智能客服，能够快速理解您的问题并生成相关解答；您还可在平台中通过链接跳转方式登录各银行官网及银行在线客服。
                <div>
                  <h3>适用人群：</h3>
                  <div>有业务办理及咨询需求的企业、个人及金融机构。</div>

                  <h3>兼容性：</h3>
                  <div class="">
                    <strong>Web端：</strong>通过浏览器访问（Chrome/Firefox/Edge/Safari）
                  </div>
                </div>
              </div>
            </div>
            <div class="title">
              <h2>二、快速入门</h2>
              <div class="help-content">
                <h3>（一）基础操作</h3>
                <div>
                  <div><strong>输入问题：</strong>在对话框输入你的问题或需求，即可获取相关信息。</div>
                  <div><strong>调整设置：</strong>可点击对话框右上角"清除上下文"以展开新的对话。如不"清除上下文"，智能客服将根据您的上下文提问内容开展联想并进行作答。</div>
                </div>

                <h3>（二）使用技巧</h3>
                <div>
                  <div><strong>精准提问技巧：</strong>
                    <div>
                      1、由"粗"至"细"进行提问：精准提问将更助于您获得精确简要的答案。
                    </div>
                    <div>
                      2、分步骤询问：复杂问题拆解后分步提问更易获得理想答案。
                    </div>
                    <div>
                      3、联想问题及热点问题：每次智能客服回答后将根据您的本次提问结合后台数据"联想"出您下一步可能会提出的问题，您可直接点击"联想问题"获取答案。也可通过界面右部"热点问题"，了解当前用户关提问频度较高的热点问题。
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="title">
              <h2>三、常见问题</h2>
              <div class="help-content">
                <div class="question">1."AI助手"智能客服是否免费？</div>
                <div class="answer">答：目前免费使用。</div>
                <div class="question">2.是否支持多语言？</div>
                <div class="answer">答：目前仅支持中文问答，未来可能增加其他语言。</div>
                <div class="question">3.如何保证隐私安全？</div>
                <div class="answer">答：用户上传的信息仅用于实时解析及大类统计分析（如聚类热点问题），不会进行用户画像分析。</div>
              </div>
            </div>
            <div class="title">
              <h2>四、关于问答内容的使用</h2>
              <div class="help-content">
                由于当前大模型技术的局限性，"AI助手"智能客服无法保证所有回答100%正确。因此，该智能体给出的答案仅作参考之用，不构成任何形式的专业建议或承诺。
                <strong>在依据本智能体的回答进行实践操作、业务办理或做出重要决策时，请您务必以官方发布的政策文件、权威资料以及专业人士的意见为准。</strong>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { MessageBox, Message } from 'element-ui';

export default {
  name: 'CommonHeader',
  data() {
    return {
      showDialog: false,
      title: 'AI助手智能客服',
      helpContent: ``
    };
  },
  created() {
  },
  methods: {
    useHelpHandler(command) {
      this.showDialog = true;
    },
  }
};
</script>

<style lang="less">
.header-banner {
  width: 100%;
}

.help-cont h1 {
  color: #2c3e50;
  border-bottom: 1px solid #3498db;
  padding-bottom: 10px;
  font-size: 28px;
  text-align: center;
}

.help-cont h2 {
  color: #2980b9;
  margin-top: 30px;
}

.help-cont h3 {
  color: #16a085;
}

.help-cont .help-content {
  text-indent: 2em;
  letter-spacing: 0.15em;
  font-size: 15px;
  padding: 5px 10px;
}

.help-cont .help-content .question {
  margin-top: 10px;
  font-weight: 600;
}

.help-cont .help-content .answer {
  padding-left: 20px;
  padding-top: 8px;
}

/* 头部样式 */
.top-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.gov-title {
  display: flex;
  align-items: center;
}

.gov-logo img {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 8px;
}

.gov-text h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}

.header-controls {
  display: flex;
  gap: 15px;
}

.home-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.home-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.help-icon {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .gov-text h1 {
    font-size: 20px;
  }
}
</style>
